<template>
	<view class="page">
		<view class="return" @click="toReturn()" style="box-shadow: 1rpx 2rpx 4rpx 2rpx gainsboro;">
			<u-icon name="arrow-left" size="20"></u-icon>
		</view>
		<u-tabs :list="routeList" @click="click" :activeStyle="activeStyle" lineColor="#2979ff"></u-tabs>
		<view @click="toCode(item)" class="list flex align" v-for="(item,index) in list" :key="index">
			<!-- <view class="list flex align" v-for="(item,index) in newList" :key="index"> -->
			<image :src="item.prize_image" v-if="item.prize_image!=''" mode="aspectFill"></image>
			<image src="/static/draw/gift.png" v-else mode="aspectFill"></image>
			<view class="list-right">
				<view class="tit">{{item.prize_name}}<text style="font-size: 20rpx;"
						v-if="item.prize_type==2">（需完善信息兑换）</text></view>
				<!-- <view class="info">红谷滩区沙井街道打造的邻里中心让居民享受多种服</view> -->
				<view class="eye">
					<view style="color: red;font-weight: bold;">兑换码：{{item.redeem_code}}</view>
					<view class="flex align between" style="width: 100%;">
						<view>中奖时间：{{item.create_time}}</view>
						<view v-if="item.receive_time!=''">兑换时间：{{item.receive_time}}</view>
						<view v-if="item.expire_time!=''">过期时间：{{item.expire_time}}</view>
					</view>

					<!-- <view class="flex align"><u-icon color="#017DF9" name="eye"></u-icon>{{item.pv}}</view> -->
				</view>
			</view>
			<view class="status" :style="item.status==1?'color: #017DF9':'color: grey'">
				{{item.status==1?'待兑换':item.status==2?'已兑换':'已过期'}}</view>
		</view>
		<uni-load-more :status="status" v-if="!empty" :content-text="loadText"></uni-load-more>
		<xw-empty :isShow="empty" text="暂无数据" textColor="#777777"></xw-empty>
		<!-- 弹窗 -->
		<view class="showCon" v-if="showCon">
			<view class="showContent">
				<view class="close" @click="toCancel()">
					<u-icon name="close-circle-fill" color="#666666" size="30"></u-icon>
				</view>
				<view style="font-size: 32rpx;margin-bottom: 10rpx;font-weight: bold;">{{itemInfo.prize_name}}</view>
				<tki-qrcode cid="qrcode1" ref="qrcode" :val="val" :size="size" />
				<view>{{itemInfo.redeem_code}}</view>
				<view style="font-size: 32rpx;">
					{{itemInfo.status==1?'扫码核销':itemInfo.status==2?'已核销':itemInfo.status==3?'已过期':''}}</view>
			</view>
		</view>
		<!-- 完善信息弹窗 -->
		<view class="showCon" v-if="showConInput">
			<view class="showContent showContent2">
				<view class="close" @click="showConInput = false">
					<u-icon name="close-circle-fill" color="#2979ff" size="28"></u-icon>
				</view>
				<view class="show2-tit">
					<view>{{itemInfo.prize_name}}</view>
					兑换需要完善个人信息
				</view>
				<view class="input-item" v-if="itemInfo.contact_name==''">
					<u--input placeholder="请输入姓名" prefixIcon="account-fill" v-model="contact_name"></u--input>
				</view>
				<view class="input-item" v-else>
					<u--input placeholder="请输入姓名" disabled prefixIcon="account-fill"
						v-model="itemInfo.contact_name"></u--input>
				</view>
				<view class="input-item" v-if="itemInfo.contact_phone==''">
					<u--input placeholder="请输入手机号" type="number" prefixIcon="phone-fill"
						v-model="contact_phone"></u--input>
				</view>
				<view class="input-item" v-else>
					<u--input placeholder="请输入手机号" disabled prefixIcon="phone-fill"
						v-model="itemInfo.contact_phone"></u--input>
				</view>
				<view v-if="itemInfo.prize_type==3">
					<view class="input-item" v-if="itemInfo.contact_idcard==''">
						<u--input placeholder="请输入身份证号" type="number" prefixIcon="man-add-fill"
							v-model="contact_idcard"></u--input>
					</view>
					<view class="input-item" v-else>
						<u--input placeholder="请输入身份证号" disabled prefixIcon="man-add-fill"
							v-model="itemInfo.contact_idcard"></u--input>
					</view>
				</view>

				<view class="show2-btn" v-if="itemInfo.contact_phone==''&&statusRe==1" @click="toSubmit()">提交</view>
				<view class="show2-btn" style="background: #55aaff;" v-if="itemInfo.contact_phone!=''&&statusRe==1">
					已提交信息，请等待后台兑换...</view>
				<view class="show2-btn" style="background: #b9b9b9;" v-if="itemInfo.contact_phone!=''&&statusRe==2">已兑换
				</view>
				<view class="show2-btn" v-if="statusRe==3">已过期</view>
				<!-- <view class="show2-btn" v-if="contact_phone!=''&&statusRe==1">已提交，兑换中..</view>
				<view class="show2-btn" v-if="contact_phone!=''&&statusRe==2">已兑换</view>
				<view class="show2-btn" v-if="contact_phone!=''&&statusRe==3">已过期</view>
				<view class="show2-btn" v-if="contact_phone==''&&statusRe==3">已过期</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		prizeRecord,
		recordSave,
		wechatLogin,
		userDetail,
		config
	} from '@/api/apiData.js';
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	export default {
		components: {
			tkiQrcode
		},
		data() {
			return {
				val: '', // 要生成的二维码值
				size: 400, // 二维码大小
				unit: 'upx', // 单位
				background: '#b4e9e2', // 背景色
				foreground: '#309286', // 前景色
				pdground: '#32dbc6', // 角标色
				icon: '', // 二维码图标
				iconsize: 40, // 二维码图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: false, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				src: '', // 二维码生成后的图片地址或base64
				showCon: false,
				activeStyle: {
					color: '#2979ff'
				},
				routeList: [{
					val: '',
					name: '全部',
				}, {
					val: 1,
					name: '待兑换',
				}, {
					val: 2,
					name: '已兑换',
				}, {
					val: 3,
					name: '已过期',
				}],
				totalPage: 1,
				page: 0,
				offset: 10,
				list: [],
				scrollTop: 0,
				empty: false,
				loadText: {
					loadmore: '点击或上拉加载更多',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				status: 'loadmore',
				channel_id: 3,
				ws: null,
				path: '/pages/news/news',
				showConInput: false,
				contact_name: '',
				contact_phone: '',
				statusRe: 1,
				record_id: '',
				itemInfo: '',
				listStatus: '',
				contact_idcard: '',
				appid: '',
				info: '',
			}
		},
		onLoad(option) {
			this.getInfo()
		},
		onShow() {},
		onPageScroll(e) {
			const that = this;
			that.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			const that = this;
			that.getlist();
		},
		methods: {
			async getInfo() {
				const result = await userDetail()
				if (result.code == 10000 || result.code == 20003) {
					this.getConfig()
					// this.wxLogin()
				} else if (result.code == 1) {
					this.info = result.data
					this.getlist()
				} else {
					uni.showToast({
						title: result.msg,
						icon: 'error'
					})
				}
			},
			async getConfig() {
				const result = await config()
				if (result.code == 1) {
					this.appid = result.data.appId
					this.checkWeChatCode()
				} else {

				}
			},
			//检查浏览器地址栏中微信接口返回的code
			checkWeChatCode() {
				let code = this.getUrlCode('code')
				if (code) {
					// uni.showToast({
					// 	title: `微信code=${code}`
					// })
					this.getOpenidAndUserinfo(code)
				} else {
					this.wxLogin()
					// this.getInfo()
				}
			},
			async getOpenidAndUserinfo(code) {
				const result = await wechatLogin({
					code: code
				})
				if (result.code == 1) {
					uni.setStorageSync('token', result.data.token);
					this.getInfo()
				} else {
					if (result.code == 10000) {
						window.location.replace('https://gxtravel.ncscloudmedia.com/h5/#/pages/draw/draw')
					}
					// uni.showToast({
					// 	title: result.msg,
					// 	icon: 'error'
					// });
				}
			},
			getUrlCode(name) {
				return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) ||
				[, ''
				])[1].replace(/\+/g, '%20')) || null
			},
			wxLogin() {
				let local = encodeURIComponent(window.location.href); //获取当前页面地址作为回调地址
				let appid = this.appid
				//通过微信官方接口获取code之后，会重新刷新设置的回调地址【redirect_uri】
				let href = "https://ncymkj.doudou00.com/get-weixin-code.html?appid=" + appid +
					"&response_type=code&scope=snsapi_userinfo&state=123456&redirect_uri=" + local + "#wechat_redirect"
				window.location.href = href
			},
			click(e) {
				this.listStatus = e.val
				this.page = 0
				this.list = []
				this.getlist()
			},
			toSubmit() {
				let that = this
				if (that.contact_name == '') {
					uni.showToast({
						title: '请输入姓名',
						icon: 'error'
					})
					return false
				}
				if (that.contact_phone == '') {
					uni.showToast({
						title: '请输入手机号',
						icon: 'error'
					})
					return false
				}
				if (that.itemInfo.prize_type == 3) {
					if (that.contact_idcard == '') {
						uni.showToast({
							title: '请输入身份证号',
							icon: 'error'
						})
						return false
					}
				}
				uni.showModal({
					title: '提示',
					content: '请确认个人信息，点击确认提交',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							that.submitS()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			async submitS() {
				let that = this
				let obj = {
					record_id: that.record_id,
					contact_name: that.contact_name,
					contact_phone: that.contact_phone
				}
				if (that.itemInfo.prize_type == 3) {
					obj.contact_idcard = that.contact_idcard
				}
				const result = await recordSave(obj)
				if (result.code == 1) {
					uni.showToast({
						title: result.msg,
					})
					setTimeout(() => {
						that.showConInput = false
						that.page = 0
						that.list = []
						that.getlist()
					}, 1000)
				} else {
					uni.showToast({
						title: result.msg,
						icon: 'error'
					})
				}
			},
			toCancel() {
				this.showCon = false
			},
			toCode(item) {
				if (item.status == 3) {
					uni.showToast({
						title: '兑奖已过期',
						icon: 'error'
					})
					return false
				}
				this.itemInfo = item
				if (item.prize_type == 1) {
					this.showCon = true
					this.val = item.redeem_code
					setTimeout(() => {
						this.$refs.qrcode._makeCode()
					}, 200)
				} else {
					this.showConInput = true
					this.contact_name = ''
					this.contact_phone = ''
					this.contact_idcard = ''
					this.statusRe = item.status
					this.record_id = item.id
				}

			},
			toReturn() {
				uni.navigateBack()
			},
			async getlist() {
				const that = this;
				const {
					totalPage,
					page,
					offset,
					list,
					listStatus
				} = that;
				let obj = {
					size: offset,
					page: page + 1,
					status: listStatus
				};
				that.status = 'loading';
				if (totalPage > page) {
					let result = await prizeRecord(obj);
					if (result.code == 1) {
						that.page = page + 1;
						if (result.data.total == 0) {
							that.empty = true;
							that.status = 'nomore';
							return;
						}
						that.empty = false;
						setTimeout(() => {
							that.status = 'loadmore';
						}, 500);
						that.list = list.concat(result.data.list);
						that.totalPage = Math.ceil(result.data.total / offset);
					}
				} else {
					setTimeout(() => {
						that.status = 'nomore';
					}, 500);
				}
			},

		}
	}
</script>

<style lang="less" scoped>
	.page {
		padding: 80rpx 32rpx;
	}

	.showCon {
		position: fixed;
		background: rgba(0, 0, 0, 0.5);
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;

		.showContent {
			width: 70%;
			height: auto;
			background: white;
			text-align: center;
			padding: 50rpx 0;
			border-radius: 10rpx;
			position: relative;

			image {
				width: 250rpx;
				height: 180rpx;
			}

			.close {
				position: absolute;
				right: 5rpx;
				top: 5rpx;
			}
		}

		.showContent2 {
			padding: 40rpx 20rpx;

			.show2-tit {
				font-weight: bold;
				margin-bottom: 30rpx;
			}

			.input-item {
				border: solid 1rpx gainsboro;
				margin-bottom: 20rpx;
				border-radius: 8rpx;
			}

			.show2-btn {
				background: #097EE8;
				color: white;
				padding: 10rpx 0;
				margin-top: 40rpx;
				border-radius: 10rpx;
			}

			.close {
				position: absolute;
				right: 10rpx;
				top: 10rpx;
			}

		}

	}

	.list {
		margin: 25rpx 0;
		box-shadow: 1rpx 2rpx 10rpx 2rpx gainsboro;
		padding: 20rpx;
		border-radius: 20rpx;
		position: relative;

		.status {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			font-size: 26rpx;
		}

		image {
			width: 154rpx;
			height: 116rpx;
			object-fit: cover;
		}

		.list-right {
			margin-left: 12rpx;
			width: 73%;

			.tit {
				color: #333333;
				font-size: 26rpx;
				// height: 72rpx;
				margin-bottom: 28rpx;
			}

			.info {
				color: #666666;
				font-size: 22rpx;
				margin: 10rpx 0;
			}

			.eye {
				// color: #C0C4CC;
				font-size: 20rpx;
			}
		}
	}
</style>